<template lang="pug">
.admin-add
  el-dialog(:title="role.id?'编辑管理员':'添加管理员'" :visible="value" @close="colse")
    el-form(:data="form")
      el-form-item(label="用户名" label-width="100px")
        el-input(v-model="form.username")
      el-form-item(label="密码" label-width="100px")
        el-input(type="password" v-model="form.password")
      el-form-item(label="头像" label-width="100px")
        image-update(v-model="form.avatar")
      el-form-item(label="角色列表" label-width="100px")
        el-select(v-model="form.role_ids" multiple placeholder="请选择角色" filterable)
          el-option(v-for='d in list' :key="d.id" :label="d.name" :value="d.id")
      el-form-item(label="电话" label-width="100px")
        el-input(v-model="form.tel")
      el-form-item(label="邮箱" label-width="100px")
        el-input(v-model="form.mail")
      el-form-item(label="描述" label-width="100px")
        el-input(v-model="form.desc")
      el-form-item
        el-button(type="primary" v-if="role.id" @click="onConfirm") 保存
        el-button(type="primary" v-else @click="onSubmit") 确定
        el-button(@click="colse") 取消

</template>
<script>
import ImageUpdate from '@/components/ImageUpdate.vue'
export default {
  components: {
    ImageUpdate
  },
  props:{
    value:{
      type:Boolean,
      default:false
    },
    role: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      form:{
        username:"",
        password:"",
        avatar: "",
        role_ids:[],
        tel:'',
        mail:'',
        desc:''
      },
      list:[],
      ListItem:[]
    }
  },
  watch: {
    role(v) {
      this.form = {
        ...v
      }
    }
  },
  created() {
    this.axios.get('/role/list').then(({data}) => {
      console.log(data);
      this.list = data.data.list
    })

    this.axios.get('/user/list').then(({data}) => {
      this.ListItem = data.data.list
    })


  },
  methods: {
    onCancel() {
      this.form = {
        username:"",
        password:"",
        avatar: "",
        role_ids:[],
        tel:'',
        mail:'',
        desc:''
      };
    },
    colse() {
      this.$emit('input', false);
      this.onCancel()
    },
    handChange(file,fileList) {
      this.fileList = fileList;
      console.log(file);
      this.form.avatar = URL.createObjectURL(file.raw)
      console.log(this.form.avatar);
    },
    onSubmit() {
      this.axios.post('/user/add',{...this.form}).then(data => {
        console.log(data);
        if(!data.errcode) {
          this.$message({
            message: '添加成功',
            type: 'success'
          });
          this.colse()
          this.$emit('confirm')
        }
      })
    },
    onConfirm() {
      this.axios.post('/user/edit',{
        ...this.form,
        id:this.role.id
      }).then(({data}) => {
        if(!data.errcode) {
          this.$message({
            message: '编辑成功',
            type: 'success'
          });
          this.colse()
          this.$emit('confirm')
        }
      })
    }
  },
}
</script>
<style lang="sass">
.admin-add
  .avatar-uploader .el-upload
    width: 178px
    height: 178px
    border: 1px dashed #d9d9d9
    border-radius: 6px
    cursor: pointer
    position: relative
    overflow: hidden
    .avatar-uploader-icon
      font-size: 28px
      color: #8c939d
      width: 178px
      height: 178px
      line-height: 178px
      text-align: center
    .avatar
      width: 178px
      height: 178px
      display: block
  .avatar-uploader .el-upload:hover
    border-color: #409EFF
</style>
